//读取是否登录
var userData = $.cookie("userState");
userData = userData? JSON.parse(userData):null;
if(userData && userData.state ===1){
    $(".index-login").hide();
    $(".welcome").show().children("span").text(userData.user);
}else{
 $(".index-login").show();
 $(".welcome").hide();
}
if(!(userData && userData.state === 1)){
    alert("你还没有登录，或者登录已失效，请重新登录");
    location.href = "login.html";
}



$(".welcome").children("i").click(function(){
    userData.state = 0;
    $.cookie("userState",JSON.stringify(userData));
    location.reload();
})

class Cart{
    constructor(){
        this.tbody = document.querySelector("tbody");
        this.url = "http://localhost:3000/api";

        this.getData();
        // 1.绑定事件
        this.addEvent();
    }
    getData(){
        this.data = $.cookie("goodMsg") ? JSON.parse($.cookie("goodMsg")) : [];

        this.load();
    }
    load(){
        $.ajax({
            url:this.url,
            data:{
                   type:"goods",
                },
            success:res=>{
                this.res = JSON.parse(res)[3];
                this.render();
            }
        })
    }
    render(){
        console.log(this.data);
        let str = `<section class="cartMain">
        <div class="cartMain_hd">
            <ul class="order_lists cartTop">
                <li class="list_chk">
                    <!--所有商品全选-->
                    <input type="checkbox" id="all" class="whole_check">
                    <label for="all"></label>
                    全选
                </li>
                <li class="list_con">商品信息</li>
                <li class="list_info">积分</li>
                <li class="list_price">单价</li>
                <li class="list_amount">数量</li>
                <li class="list_sum">金额</li>
                <li class="list_op">操作</li>
            </ul>
        </div>`;
        for(let i=0;i<this.data.length;i++){
            for(let j=0;j<this.res.length;j++){
                if(this.data[i].id == this.res[j].id){
                    str += `
                    <div class="cartBox">
                        <div class="shop_info">
                            <div class="all_check">
                                <!--店铺全选-->
                                <input type="checkbox" id="shop_a" class="shopChoice">
                                <label for="shop_a" class="shop"></label>
                            </div>
                        </div>
                        <div class="order_content">
                            <ul class="order_lists">
                                <li class="list_chk">
                                    <input type="checkbox" id="checkbox_2" class="son_check">
                                    <label for="checkbox_2"></label>
                                </li>
                                <li class="list_con">
                                    <div class="list_img"><a href="javascript:;"><img src="${this.res[j].图片地址}" alt=""></a></div>
                                    <div class="list_text"><a href="javascript:;">${this.res[j].书名}</a></div>
                                </li>
                                <li class="list_info">
                                    <p>${parseInt( (this.res[j].现价.split("￥")[1]))*10}</p>
                                </li>
                                <li class="list_price">
                                    <p class="price">${this.res[j].现价}</p>
                                </li>
                                <li class="list_amount">
                                    <div class="amount_box">
                                        <a href="javascript:;" class="reduce reSty">-</a>
                                        <input type="text" value="${this.data[i].num}" class="sum">
                                        <a href="javascript:;" class="plus">+</a>
                                    </div>
                                </li>
                                <li class="list_sum">
                                    <p class="sum_price">￥${(this.data[i].num)*parseInt( (this.res[j].现价.split("￥")[1]))}</p>
                                </li>
                                <li class="list_op" >
                                    <p class="del" data-index="${this.res[j].id}><a href="javascript:;" class="delBtn" >移除商品</a></p>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="bar-wrapper">
                    <div class="bar-right">
                    <div class="piece">已选商品<strong class="piece_num">0</strong>件</div>
                    <div class="totalMoney">共计: <strong class="total_text">0.00</strong></div>
                    <div class="calBtn"><a href="javascript:;">结算</a></div>
                    </div>
                    </div>`
                }
            }
        }
        this.tbody.innerHTML = str;
        Cart1();
    }
    addEvent(){
        let that = this;
        // 事件委托绑定删除按钮的事件
        this.tbody.addEventListener("click",function(eve){
            if(eve.target.className === "del"){
                // 2.记录点击商品的唯一id
                that.id = eve.target.parentNode.getAttribute("data-index");
                // 3.删除DOM元素
                eve.target.parentNode.remove();
                // 4.更新cookie数据
                that.update();
            }
        })

        this.tbody.addEventListener("input",function(eve){
            if(eve.target.className === "setNum"){
                // 2.记录修改商品的唯一id
                that.id = eve.target.parentNode.parentNode.getAttribute("data-index");

                that.num = eve.target.value;

                // 3.更新cookie数据
                // that.update();
            }
        })
    }
    update(){
        // 遍历找到cookie数据中符合当前点击商品id的数据
        let i = 0;
        this.data.some((val,idx)=>{
            i = idx;
            return val.id === this.id
        })
        // 将这个数据，从数组中删掉
        this.data.splice(i, 1);
        // 将数组，重新设置回cookie
        $.cookie("goodMsg",JSON.stringify(this.data));
        window.location.reload();
    }
}

new Cart();

    function Cart1() {

    //全局的checkbox选中和未选中的样式
    var $allCheckbox = $('input[type="checkbox"]'),     //全局的全部checkbox
        $wholeChexbox = $('.whole_check'),
        $cartBox = $('.cartBox'),                       //每个商铺盒子
        $shopCheckbox = $('.shopChoice'),               //每个商铺的checkbox
        $sonCheckBox = $('.son_check');                 //每个商铺下的商品的checkbox
    $allCheckbox.click(function () {
        if ($(this).is(':checked')) {
            $(this).next('label').addClass('mark');
        } else {
            $(this).next('label').removeClass('mark')
        }
    });

    //===============================================全局全选与单个商品的关系================================
    $wholeChexbox.click(function () {
        var $checkboxs = $cartBox.find('input[type="checkbox"]');
        if ($(this).is(':checked')) {
            $checkboxs.prop("checked", true);
            $checkboxs.next('label').addClass('mark');
        } else {
            $checkboxs.prop("checked", false);
            $checkboxs.next('label').removeClass('mark');
        }
        totalMoney();
    });


    $sonCheckBox.each(function () {
        $(this).click(function () {
            if ($(this).is(':checked')) {
                //判断：所有单个商品是否勾选
                var len = $sonCheckBox.length;
                var num = 0;
                $sonCheckBox.each(function () {
                    if ($(this).is(':checked')) {
                        num++;
                    }
                });
                if (num == len) {
                    $wholeChexbox.prop("checked", true);
                    $wholeChexbox.next('label').addClass('mark');
                }
            } else {
                //单个商品取消勾选，全局全选取消勾选
                $wholeChexbox.prop("checked", false);
                $wholeChexbox.next('label').removeClass('mark');
            }
        })
    })

    //=======================================每个店铺checkbox与全选checkbox的关系/每个店铺与其下商品样式的变化===================================================

    //店铺有一个未选中，全局全选按钮取消对勾，若店铺全选中，则全局全选按钮打对勾。
    $shopCheckbox.each(function () {
        $(this).click(function () {
            if ($(this).is(':checked')) {
                //判断：店铺全选中，则全局全选按钮打对勾。
                var len = $shopCheckbox.length;
                var num = 0;
                $shopCheckbox.each(function () {
                    if ($(this).is(':checked')) {
                        num++;
                    }
                });
                if (num == len) {
                    $wholeChexbox.prop("checked", true);
                    $wholeChexbox.next('label').addClass('mark');
                }

                //店铺下的checkbox选中状态
                $(this).parents('.cartBox').find('.son_check').prop("checked", true);
                $(this).parents('.cartBox').find('.son_check').next('label').addClass('mark');
            } else {
                //否则，全局全选按钮取消对勾
                $wholeChexbox.prop("checked", false);
                $wholeChexbox.next('label').removeClass('mark');

                //店铺下的checkbox选中状态
                $(this).parents('.cartBox').find('.son_check').prop("checked", false);
                $(this).parents('.cartBox').find('.son_check').next('label').removeClass('mark');
            }
            totalMoney();
        });
    });


    //========================================每个店铺checkbox与其下商品的checkbox的关系======================================================

    //店铺$sonChecks有一个未选中，店铺全选按钮取消选中，若全都选中，则全选打对勾
    $cartBox.each(function () {
        var $this = $(this);
        var $sonChecks = $this.find('.son_check');
        $sonChecks.each(function () {
            $(this).click(function () {
                if ($(this).is(':checked')) {
                    //判断：如果所有的$sonChecks都选中则店铺全选打对勾！
                    var len = $sonChecks.length;
                    var num = 0;
                    $sonChecks.each(function () {
                        if ($(this).is(':checked')) {
                            num++;
                        }
                    });
                    if (num == len) {
                        $(this).parents('.cartBox').find('.shopChoice').prop("checked", true);
                        $(this).parents('.cartBox').find('.shopChoice').next('label').addClass('mark');
                    }

                } else {
                    //否则，店铺全选取消
                    $(this).parents('.cartBox').find('.shopChoice').prop("checked", false);
                    $(this).parents('.cartBox').find('.shopChoice').next('label').removeClass('mark');
                }
                totalMoney();
            });
        });
    });


    //=================================================商品数量==============================================
    var $plus = $('.plus'),
        $reduce = $('.reduce'),
        $all_sum = $('.sum');
    $plus.click(function () {
        var $inputVal = $(this).prev('input'),
            $count = parseInt($inputVal.val())+1,
            $obj = $(this).parents('.amount_box').find('.reduce'),
            $priceTotalObj = $(this).parents('.order_lists').find('.sum_price'),
            $price = $(this).parents('.order_lists').find('.price').html(),  //单价
            $priceTotal = $count*parseInt($price.substring(1));
        $inputVal.val($count);
        $priceTotalObj.html('￥'+$priceTotal);
        if($inputVal.val()>1 && $obj.hasClass('reSty')){
            $obj.removeClass('reSty');
        }
        totalMoney();
    });

    $reduce.click(function () {
        var $inputVal = $(this).next('input'),
            $count = parseInt($inputVal.val())-1,
            $priceTotalObj = $(this).parents('.order_lists').find('.sum_price'),
            $price = $(this).parents('.order_lists').find('.price').html(),  //单价
            $priceTotal = $count*parseInt($price.substring(1));
        if($inputVal.val()>1){
            $inputVal.val($count);
            $priceTotalObj.html('￥'+$priceTotal);
        }
        if($inputVal.val()==1 && !$(this).hasClass('reSty')){
            $(this).addClass('reSty');
        }
        totalMoney();
    });

    $all_sum.keyup(function () {
        var $count = 0,
            $priceTotalObj = $(this).parents('.order_lists').find('.sum_price'),
            $price = $(this).parents('.order_lists').find('.price').html(),  //单价
            $priceTotal = 0;
        if($(this).val()==''){
            $(this).val('1');
        }
        $(this).val($(this).val().replace(/\D|^0/g,''));
        $count = $(this).val();
        $priceTotal = $count*parseInt($price.substring(1));
        $(this).attr('value',$count);
        $priceTotalObj.html('￥'+$priceTotal);
        totalMoney();
    })

    //======================================移除商品========================================

    var $order_lists = null;
    var $order_content = '';
    $('.delBtn').click(function () {
        $order_lists = $(this).parents('.order_lists');
        $order_content = $order_lists.parents('.order_content');
        $('.model_bg').fadeIn(300);
        $('.my_model').fadeIn(300);
    });

    //关闭模态框
    $('.closeModel').click(function () {
        closeM();
    });
    $('.dialog-close').click(function () {
        closeM();
    });
    function closeM() {
        $('.model_bg').fadeOut(300);
        $('.my_model').fadeOut(300);
    }
    //确定按钮，移除商品
    $('.dialog-sure').click(function () {
        $order_lists.remove();
        if($order_content.html().trim() == null || $order_content.html().trim().length == 0){
            $order_content.parents('.cartBox').remove();
        }
        closeM();
        $sonCheckBox = $('.son_check');
        totalMoney();
    })

    //======================================总计==========================================

    function totalMoney() {
        var total_money = 0;
        var total_count = 0;
        var calBtn = $('.calBtn a');
        $sonCheckBox.each(function () {
            if ($(this).is(':checked')) {
                var goods = parseInt($(this).parents('.order_lists').find('.sum_price').html().substring(1));
                var num =  parseInt($(this).parents('.order_lists').find('.sum').val());
                total_money += goods;
                total_count += num;
            }
        });
        $('.total_text').html('￥'+total_money);
        $('.piece_num').html(total_count);

        // console.log(total_money,total_count);

        if(total_money!=0 && total_count!=0){
            if(!calBtn.hasClass('btn_sty')){
                calBtn.addClass('btn_sty');
            }
        }else{
            if(calBtn.hasClass('btn_sty')){
                calBtn.removeClass('btn_sty');
            }
        }
    }


};
